<template>
	<view class="commission">
		<view class="list_box">
			<view class="list_top">
				<view class="list"  @click="showPicker('date')">
					<view>{{year}}年{{month}}月</view>
					<image v-if="isShow" class="b_img" src="../../static/images/bottom.png" mode=""></image>
					<image v-else class="b_img" src="../../static/images/top.png" mode=""></image>
				</view>
				<view class="num" v-if="type == 1">进：{{allnumAdd}}</view>
				<view class="num" v-if="type == 2">进：{{allnumAdd}}</view>
				
				<view class="num" v-if="type == 1">出：{{allnumDec}}</view>
				<view class="num" v-if="type == 2">出：{{allnumDec}}</view>
			</view>
			<view class="list_two" v-for="(x,y) in list" :key="x.id">
				<view class="list_two_top">
					<view class="type">{{x.remark}}</view>
					<view style="color:green;" v-show="x.changeType == 1" class="type">+{{x.changeNum}}</view>
					<view style="color:red;" v-show="x.changeType == 2" class="type">-{{x.changeNum}}</view>
				</view>
				<view class="list_two_top list_two_top1">
					<view class="num">{{x.created_at}}</view>
					<view class="num">数量 {{x.endNum}}</view>
				</view>
			</view>
		</view>
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		<w-picker mode="date" fields="month" @confirm="onConfirm($event,'date')" @cancel="onCancel" ref="date" ></w-picker>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue';
	import uniLoadMore from "@/components/uni-load-more.vue" 
	export default {
		components: {
			uniLoadMore,
			wPicker
		},
		data() {
			return {
				list:[],
				type:1,
				navType:0,
				isShow:true,
				year:'',
				month:'',
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				id:0,
				allnumAdd:0,
				allnumDec:0
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.navType = options.navType;
			this.id=options.id;
			var date = new Date();
			this.year = date.getFullYear();
			this.month = date.getMonth() + 1;
			this.month = (this.month>10)?this.month:'0'+this.month;
			this.sureload();
		},
		methods: {
			sureload(){
				if(this.type == 1){
					uni.setNavigationBarTitle({
						title:'库存流水'
					})
					this.getinfo1();
				}else if(this.type == 2){
					uni.setNavigationBarTitle({
						title:'补贴流水'
					})
					this.getinfo2();
				}
			},
			getinfo1(){
				var that=this;
				this.$http.get('shop/getMyShopKucun',{id:that.id,cateId:that.navType,year:that.year,month:that.month}).
				then(function (response) {
					console.log(response.data);
					that.list=response.data.child;
					that.allnumAdd=response.data.num1;
					that.allnumDec=response.data.num2;
				}).catch(function (error) {
					console.log(error);
				});
			},
			getinfo2(){
				var that=this;
				this.$http.get('shop/getMyShopButie',{id:that.id,cateId:that.navType,year:that.year,month:that.month}).
				then(function (response) {
					console.log(response.data);
					that.list=response.data.child;
					that.allnumAdd=response.data.num1;
					that.allnumDec=response.data.num2;
				}).catch(function (error) {
					console.log(error);
				});
			},
			getinfo3(){
				var that=this;
				this.$http.get('/tyshop/typeziti',{id:that.id,cateid:that.navType,year:that.year,month:that.month}).
				then(function (response) {
					console.log(response.data);
					that.list=response.data.child;
					that.allnum=response.data.allnum;
				}).catch(function (error) {
					console.log(error);
				});
			},
			showPicker(type) {
				this.$refs[type].show();
				this.isShow = !this.isShow;
			},
			onConfirm(res, type) {
				this.isShow = !this.isShow;
				switch (type) {
					case "date":
						this.year = res.obj.year;
						this.month = res.obj.month;
						break;
				}
				this.sureload();
			},
			onCancel(){
				this.isShow = !this.isShow;
			},
		},
		//加载更多
		onReachBottom(){
			console.log('ReachBottom');
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			//延迟是为了看效果，实际数据时不要延迟 loadingType=2时表示没有数据了
			setTimeout(() => {
				this.loadingType = 0;
			}, 2000);
		}
	}
</script>

<style scoped lang="scss">
	.commission{
		width: 100%;
		.list_box{
			background: #f6f6f6;
			.list_two{
				padding: 20rpx 30rpx;
				background: #fff;
				border-bottom: 1px solid #e5e5e5;
				.user_name{
					padding-top: 10rpx;
					color: #ffa200;
					font-size: 28rpx;
				}
				.list_two_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.type{
						color: #333;
						font-size: 30rpx;
					}
					.num{
						padding-top: 10rpx;
						color: #666666;
						font-size: 26rpx;
					}
				}
			}
			.list_top{
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.num{
					color: #333;
					font-size: 34rpx;
					font-weight: bold;
				}
				.list{
					font-weight: bold;
					display: flex;
					align-items: center;
					color: #333;
					font-size: 34rpx;
					.b_img{
						margin-left: 10rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}
	}
</style>
